<template>
    <div>
        <div class="topTitle">
            <i class="iconfont location">&#xe64b;</i>
            <span>当前位置：密码修改</span>
        </div>
        <p class="tipInfo2">为了账号安全，请您及时修改密码！</p>
        <div class="editList">
            <div class="personNum">
                <span>工号</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>
                    <input type="text" v-model="number" readonly>
                </span>
            </div>
            <div class="oldPwd">
                <span>旧密码</span>&nbsp;&nbsp;
                <span>
                    <input type="password" v-model="oldpwd">
                </span>
            </div>
            <div class="newPwd">
                <span>新密码</span>&nbsp;&nbsp;
                <span>
                    <input type="password" v-model="newpwd">
                </span>
            </div>
            <div class="sureBtn" @click="savePwd">确定</div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      // number: JSON.parse(localStorage.getItem("teacherinfo")).Te_number,
      number: JSON.parse(this.$store.state.teacherinfo).Te_number,
      oldpwd: "",
      newpwd: ""
    };
  },
  methods: {
    savePwd() {
      if (this.oldpwd.trim() === "") {
        this.$message("原密码不能为空");
        return false;
      }
      if (this.newpwd.trim() === "") {
        this.$message("新密码不能为空");
        return false;
      }
      if (this.newpwd.trim().length < 8) {
        this.$message("密码位数不能小于8位！");
        return false;
      }
      if (this.oldpwd.trim() == this.newpwd.trim()) {
        this.$message("新密码和原密码不能相同！");
        return false;
      }
      var list = {
        Te_number: this.number,
        Te_psw: this.oldpwd
      };
      //console.log(list);
      this.$axios
        .put("/Login/" + this.newpwd, list)
        .then(Json => {
          console.log(Json.data);
          if (Json.data === 1) {
            this.$message("原密码输入错误！");
            return false;
          }
          if (Json.data === 2) {
            this.$message("此用户不存在！");
            return false;
          }
          this.$message({
            type: "success",
            message: "密码修改成功！"
          });
        })
        .catch(error => {});
    }
  }
};
</script>


<style scoped>
font-face {
  font-family: "iconfont"; /* project id 1492498 */
  src: url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.eot");
  src: url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.woff") format("woff"),
    url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.topTitle {
  border-bottom: 1px solid #e5e5e5;
  height: 60px;
  line-height: 60px;
  margin-bottom: 20px;
  color: #64a4f6;
}
.location {
  color: #64a4f6;
  font-size: 30px;
  vertical-align: bottom;
}
.tipInfo2 {
  margin-left: 20px;
  color: red;
  font-size: 14px;
}
.editList {
  margin-top: 100px;
  text-align: center;
  color: #64a4f6;
}
.personNum,
.oldPwd,
.newPwd {
  margin: 30px 0;
}
.personNum input,
.oldPwd input,
.newPwd input {
  -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 50%;
}
.sureBtn {
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  background: #73d25a;
  color: white;
  border-radius: 3px;
  cursor: pointer;
}
</style>

